<template>
    <div>
        <el-header>
           <div class="left">
                <el-icon @click="handCollapsed"><Menu /></el-icon>
                <span style="margin-left:10px">{{store.state.companyData.companyName}}</span>
           </div>
           <div class="right">
                <span>欢迎 {{ store.state.user.username }} 回来</span>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-icon :size=30 color="white"><User /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleCenter">个人中心</el-dropdown-item>
                            <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
           </div>
        </el-header>
    </div>
</template>

<script setup>
    import {useStore} from 'vuex';
    import {Menu,User} from '@element-plus/icons-vue';
    import {useRouter} from 'vue-router';

    const router=useRouter()
    const store=useStore();

    // 个人中心
    const handleCenter=()=>{
        router.push('/center')
    }

    // 退出
    const handleLogout=()=>{
        store.commit('updateToken','')
        store.commit('clearuser',{})
        router.push('/login')
    }

    const handCollapsed=()=>{
        store.commit('changeCollapsed')
    }
</script>

<style lang="scss" scoped>
    .el-header{
        background-color: #2d3a4b;
        color:white;
        width:100%;
        height:60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left,.right{
        display: flex;
    }
    .left{
        i{
            margin:auto;
            cursor: pointer;
        }
    }
    .right{
        .el-dropdown{
            margin:auto
        }
    }
</style>